<template>
	<view :style="{overflow: 'auto',}">
		<template
			v-if="showQuestion.itemTypeName === '判断题' || showQuestion.type === '0101' || showQuestion.itemType=== '0101'">
			<view v-for="(item) in judgeType" :key="item.code">
				<view @click="onChange(item.code)" class="questionTextItem" :style="{
						fontSize: fontSize + 'rpx',
						lineHeight: (fontSize + 12) + 'rpx'
					}">
					<view style="width: 80%; display: flex; flex-direction: row;margin: 30rpx 0;align-items: center;">
						<u-icon v-if="selectAnswer === item.code" name="checkmark-circle-fill" size="24"
							color="#37B874"></u-icon>
						<view v-else class="option">
							{{item.code}}
						</view>
						<rich-text style="margin-left: 20rpx;margin-top: 6rpx;" :nodes="item.context"></rich-text>
					</view>
				</view>
			</view>
		</template>

		<template
			v-else-if="showQuestion.itemTypeName === '单选题' || showQuestion.type === '0201'|| showQuestion.itemType=== '0201'">
			<view v-for="(item) in JSON.parse(showQuestion.selections)" :key="item.code">
				<view @click="onChange(item.code)" :style="{
						fontSize: fontSize + 'rpx',
						// lineHeight: (fontSize + 12) + 'rpx'
					}">
					
					<view style="width: 80%; display: flex; flex-direction: row;margin: 30rpx 0;align-items: center;">
						<u-icon  v-if="selectAnswer === item.code"  name="checkmark-circle-fill" size="24" color="#37B874"></u-icon>
						<view v-else class="option" style="width: 60rpx;">
							{{item.code}}
						</view>
						<rich-text style="margin-left: 20rpx; margin-top: 6rpx; width: 85vw;" :nodes="item.context"></rich-text>
					</view>
					
				
				</view>
			</view>

		</template>
	</view>
</template>

<script>
	export default {
		name: "RadioQuestion",
		data() {
			return {
				judgeType: [{
					code: 'A',
					context: '正确'
				}, {
					code: 'B',
					context: '错误'
				}], // 判断题选项
			};
		},
		props: ['showQuestion', 'selectAnswer', 'windowHeight', 'fontSize', 'showAnalysis', 'flag'],
		mounted() {
			console.log(123456789)
			console.log(this.showQuestion, this.showAnalysis, '------', this.selectAnswer, this.fontSize)
		},
		methods: {
			onChange(data) {
				console.log(data, 'data', this.showAnalysis)

				this.$parent.onChange(data);
			}
		},
	}
</script>

<style>
	.option {
		width: 48rpx;
		height: 48rpx;
		text-align: center;
		line-height: 48rpx;
		border: '1px solid #EAEAEA';
		border-radius: 50%;
		background: linear-gradient(357.46deg, #E3E3E3 1.95%, #FFFFFF 91.89%);
	}

	
	.circle {
		width: 48rpx;
		height: 48rpx;
		text-align: center;
		line-height: 48rpx;
		border-radius: 50%;
		background: #37B874;
		color: #fff;
	}
</style>